import SyntaxHighlighter from "@/components/SyntaxHighlighter"


function ErrorBoundary() {

  const code = `
    class ErrorBoundary extends React.Component {
      constructor(props) {
        super(props)
        this.state = { hasError: false }
      }

      static getDerivedStatefromError(error) {
        // 更新状态以触发备用 UI 渲染
        return { hasError: true }
      }

      componentDidCatch(error, info) {
        // 你可以在这里记录错误日志
        console.log(error, info)
      }

      render() {
        if (this.state.hasError) {
          return <h1>Something went wrong.</h1> // 错误发生时显示的 UI
        }
        return this.props.children
      }
    }
  `

  return (
    <div>
      <p>React 的错误边界（Error Boundaries）机制允许你在应用中捕获 JavaScript 错误，并展示备用 UI，而不会导致整个组件树崩溃。错误边界是 React 组件，它会捕获其子组件树中的错误。</p>
      <p>错误边界的实现：</p>
      <p>要实现一个错误边界，你需要定义一个类组件并实现 componentDidCatch 或者 static getDerivedStateFromError 方法来捕获错误。</p>

      <p>示例：</p>
      <SyntaxHighlighter children={code} />
    </div>
  )
}

export default ErrorBoundary